<template>
  <el-dialog :visible.sync="dialogFormVisible" :lock-scroll="false" :close-on-click-modal="false" title="权限分配" top="30px" width="1100px" class="dialog" @close="closeDialog">
    <el-tree
      ref="tree"
      v-loading="listLoading"
      :data="menuData"
      :props="defaultProps"
      :default-checked-keys="menuChecked"
      class="dept-tree"
      default-expand-all
      show-checkbox
      :check-strictly="strictly"
      node-key="id"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span><i :class="data.icon" />{{ data.name }}</span>
      </span>
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">关 闭</el-button>
      <el-button type="primary" @click="doSave()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
/* eslint-disable */
import { pagination } from '@/mixins/index'
export default {
  mixins: [pagination],
  data () {
    return {
      activeName: '菜单权限',
      listLoading: false,
      dialogFormVisible: false,
      roleId: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      menuData: [],
      menuChecked: [],
      strictly: true
    }
  },
  methods: {
    getData () {
      this.listLoading = true
      this.$http.request({
        url: `/role/resource`,

        data: {},
        tokenRefresh: () => this.getData()
      }).then(res => {
        this.$http.request({
          url: `/role/resource/${this.roleId}`,

          data: {}
        }).then(d => {
          this.menuData = res.data
          this.findChildren(d.data)
          this.listLoading = false
          this.strictly = false
        })
      })
    },
    findChildren (arr) {
      arr.forEach(e => {
        this.menuChecked.push(e.id)
        if (e.children.length) {
          this.findChildren(e.children)
        }
      })
    },
    doSave () {
      let data1 = this.$refs.tree.getHalfCheckedKeys()
      let data2 = this.$refs.tree.getCheckedKeys()
      let params = { roleId: this.roleId, resourceId: [] }
      data1.forEach(d1 => {
        params.resourceId.push(d1)
      })
      data2.forEach(d2 => {
        params.resourceId.push(d2)
      })
      this.$http.request({
        method: 'post',
        url: `/role/authority/resource`,

        data: JSON.stringify(params)
      }).then(() => {
        this.$message.success('分配成功')
        this.dialogFormVisible = false
      })
    },
    setTreeData (node, checked) {
      this.$refs.tree.setChecked(node.data.id, checked)
      if (node.parent.level !== 0) {
        if (!this.menuChecked.length) {
          this.setTreeData(node.parent, checked)

          const checkChild = node.parent.childNodes.filter(n => n.checked === true)
          if (checkChild.length) {
            this.$refs.tree.setChecked(node.parent.data.id, true)
          }

          if (!checked) {
            const checkFalseChild = node.childNodes.filter(n => n.checked === true)
            checkFalseChild.forEach(c => {
              this.$refs.tree.setChecked(c.data.id, false)
            })
          }
        }
      }
    },
    closeDialog () {
      this.menuChecked = []
      this.menuData = []
      this.activeName = '菜单权限'
      this.strictly = true
    },
    nesPush (val) {
      this.menuChecked.forEach(e => {
        if(e !== val){
          this.menuChecked.push(val)
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  .dialog-footer {
    margin-top: 20px;
  }
  .custom-tree-node i{
    margin-right: 3px;
  }
</style>
<style>
.dialog .el-dialog__body {
  padding-top: 10px;
  height: 700px;
  overflow-y: auto;
}
</style>
